<template>
  <el-select
    ref="select"
    :value="labelModel"
    popper-class="mod-select-tree"
    :filterable="filterable"
    :disabled="disabledSelected"
    :filter-method="filterMethod"
    :clearable="filterable || lazy"
    @clear="clearHandler"
    @visible-change="visibleChange"
  >
    <el-option
      :value="valueModel"
      :label="labelModel"
    >
      <el-tree
        ref="tree"
        empty-text="无数据"
        :expand-on-click-node="false"
        :accordion="accordion"
        :data="options"
        :props="propsMerge"
        :lazy="lazy"
        :load="onLoadNodes"
        :default-expand-all="!lazy"
        :node-key="propsMerge.value"
        :filter-node-method="filterNode"
        :render-content="renderContent"
        @node-click="onNodeClick"
      >

      </el-tree>
    </el-option>
  </el-select>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: 'SelectTree',
    model: {
      prop: 'value',
      event: 'select'
    },
    props: {
      value: [String, Number],
      clearable: Boolean,
      rootKey: String,
      joint: Boolean,
      disabled: Boolean,
      filterable: Boolean,
      lazy: Boolean,
      url: String,
      accordion: Boolean,
      options: {
        type: Array,
        default: function() {
          return []
        }
      },
      props: {
        type: Object,
        default: function() {
          return {}
        }
      },
      queryParams: {
        type: Object,
        default: function() {
          return {
            rows: 100000,
            page: 1,
            sort: 'orderNum'
          }
        }
      }
    },
    data() {
      return {
        labelModel: '',
        valueModel: '',
        once: false
      }
    },
    computed: {
      disabledSelected() {
        if (this.disabled) {
          return true
        }
        return this.$parent.form?this.$parent.form.disabled: false
      },
      propsMerge() {
        const propsTemp = Object.assign({
          parent: 'parentId',
          value: 'rowGuid',
          label: 'label',
          children: 'children',
          disabled: 'disabled',
          isLeaf: 'isLeaf',
        },this.props)
        return propsTemp
      }
    },
    watch: {
      value: {
        handler(val) {
          this.valueModel = val
          this.initHandler()
        },
        immediate: true
      },
      options: {
        handler(val) {
          if (!val || this.lazy) {
            return
          }
          this.initHandler()
        },
        immediate: true
      }
    },
    methods: {
      initHandler() {
        if (!this.value) {
          return
        }
        console.log(this.options)
        this.$nextTick(() => {
          const temp = this.$refs.tree.getNode(this.value)
          this.labelModel = temp?temp.label:''
          this.$refs.tree.setCurrentKey(this.value)
        })
      },
      onNodeClick(data, node) {
        debugger
        if (node.disabled) {
          this.$refs.tree.setCurrentKey(this.value || null)
        } else {
          this.labelModel = node.label
          this.valueModel = node.key
          this.$emit('slected', node.key)
          this.$emit('change', node.data.node)
          this.$refs.select.blur()
          this.$refs.select.focus()
          if (this.lazy) {
            this.$set(this.$refs.select, 'visible', false)
          }
        }
      },
      visibleChange(show) {
        if (!show) {
          return
        }
        if (show && !this.labelModel) {
          this.labelModel = ' '
          this.$nextTick(() => {this.labelModel = ''})
        }
        if (this.lazy && this.once) {
          this.getNodeList(this.rootKey).then(data => {
            this.$refs.tree.updateKeyChildren(this.rootKey, data)
          })
        } else{
          this.$emit('refresh')
        }
        this.initHandler()
        this.once = true
      },
      filterMethod(query) {
        this.$refs.tree.filter(query)
        return true
      },
      filterNode(query, data) {
        if (!query) {
          return
        }
        return data[this.propsMerge.label].includes(query)
      },
      clearHandler() {
        this.valueModel = this.lazy?this.rootKey:this.$enum.emptyRowGuid
        this.labelModel = this.lazy?'':'所有'
        this.$emit('selected','')
        this.$refs.tree.filter()
        this.$refs.tree.setCurrentKey(null)
      },
      onLoadNodes(node, resolve) {
        this.getNodeList(node.data[this.propsMerge.value]).then(data => resolve(data))
      },
      getNodeList(id = this.rootKey) {
        const params = this.queryParams
        const paramsUrl = this.joint?`/${id}`:''
        if (!this.joint) {
          params.parentId = id
        }
        return new Promise((resolve) => {
          // request 请接口
        })
      },
      renderContent(h, {node}) {
        return (<span class={`el-tree-node__label ${node.disabled?'is-disabled':''}`}>{node.label}</span>)
      }
    },
  }
</script>

<style>
</style>
